<template>
  <section class="flex h-screen border border-gray-300 rounded-lg overflow-hidden" data-wails-drag>
    <aside class="w-16 f-full flex-none bg-gray-100 rounded-lg border-r relative">
      <ul class="flex flex-col space-y-6">
        <li class="h-16 w-full flex items-center justify-center">
          <base-icon name="logo" iconClass="text-blue-500" size="40"></base-icon>
        </li>
        <li
          data-wails-no-drag
          v-for="(item, key) in menuList"
          :key="key"
          class="flex items-center justify-center text-gray-600"
          @click="$router.push({ name: item.pathName })"
        >
          <div
            class="cursor-pointer bg-gray-300 flex items-center justify-center hover:bg-blue-500 hover:text-white w-10 h-10 rounded-lg"
            :class="item.pathName == menuName ? 'bg-blue-500 text-gray-100' : ''"
            :title="item.title"
          >
            <base-icon size="20" :name="item.svgName"></base-icon>
          </div>
        </li>
      </ul>

      <div class="h-16 w-full absolute bottom-2 flex items-center justify-center text-gray-600">
        <div
          data-wails-no-drag
          class="cursor-pointer bg-gray-300 flex items-center justify-center w-10 h-10 rounded-lg hover:bg-blue-500 hover:text-white"
          @click="handleWinClose"
          title="安全退出"
        >
          <base-icon size="16" name="quit"></base-icon>
        </div>
      </div>
    </aside>
    <main class="f-full flex-grow overflow-y-auto">
      <router-view v-slot="{ Component }">
        <transition name="fade-transform" mode="out-in">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </main>
  </section>
</template>

<script setup>
import { useRoute } from "vue-router";
import { computed, getCurrentInstance, onBeforeMount } from "vue";
const route = useRoute();
const internalInstance = getCurrentInstance();

onBeforeMount(() => {
  internalInstance.appContext.config.globalProperties.$apath = "1111111111111";
});

// 当前的菜单名
const menuName = computed(() => route.name);
let menuList = [
  {
    svgName: "compress",
    pathName: "compress",
    title: "图片压缩"
  },
  {
    svgName: "watermark",
    pathName: "watermark",
    title: "图片水印"
  },
  {
    svgName: "clipper",
    pathName: "clipper",
    title: "图片裁剪"
  }
];

// 关闭窗口
const handleWinClose = () => {
  window.runtime.Quit();
};
</script>
